import React, { useState } from 'react';
import { Breadcrumb } from 'antd';
import PolicyRadio from '@/pages/components/PolicyRadio';
import ApplicationQuery from './Components/ApplicationQuery';
import AppealQuery from '@/pages/policyCar/AppealQuery';
import ModifyInfo from './Components/ModifyInfo';
import ModifyPwd from './Components/ModifyPwd';
import styles from './index.less';

const PersonalCenter: React.FC = () => {
  const [personalCenterRadio, setPersonalCenterRadio] = useState('01');
  return (
    <div className={styles.personalCenterWrapper}>
      <div className={styles.personalCenterTitle}>
        <span className={styles.personalCenterTitleText}>个人中心</span>
      </div>
      <div className={styles.personalCenterMain}>
        <div className={styles.personalCenterBreadcrumb}>
          {process.env.SYSTEM === 'policy' && (
            <Breadcrumb separator="">
              <Breadcrumb.Item>您的位置</Breadcrumb.Item>
              <Breadcrumb.Separator>:</Breadcrumb.Separator>
              <Breadcrumb.Item href="">首页</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item>个人中心</Breadcrumb.Item>
            </Breadcrumb>
          )}
          {process.env.SYSTEM === 'policyCar' && (
            <Breadcrumb separator="">
              <Breadcrumb.Item>您的位置</Breadcrumb.Item>
              <Breadcrumb.Separator>:</Breadcrumb.Separator>
              <Breadcrumb.Item href="">首页</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="">政企直通车</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item>个人中心</Breadcrumb.Item>
            </Breadcrumb>
          )}
        </div>
        <div className={styles.personalCenterTableGroup}>
          <div className={styles.tableGroupLeft}>
            <PolicyRadio
              defaultValue={'01'}
              dataSource={[
                {
                  title: `${process.env.SYSTEM === 'policy' ? '申请查询' : '诉求查询'}`,
                  code: '01',
                },
                { title: '修改信息', code: '02' },
                { title: '修改密码', code: '03' },
              ]}
              onChange={(e) => {
                setPersonalCenterRadio(e.target.value);
              }}
            />
          </div>
          <div className={styles.tableGroupRight}>
            {process.env.SYSTEM === 'policy' && personalCenterRadio === '01' && (
              <ApplicationQuery />
            )}
            {process.env.SYSTEM === 'policyCar' && personalCenterRadio === '01' && (
              <AppealQuery type={'personalCenter'} />
            )}
            {personalCenterRadio === '02' && <ModifyInfo />}
            {personalCenterRadio === '03' && <ModifyPwd />}
          </div>
        </div>
      </div>
    </div>
  );
};

export default PersonalCenter;
